<template>
	<view class="pageview">
		<cl-navbar autoBack placeholder :title="$t('chat.group_chat_config.title')">
			<template slot="right">
				<text style="font-size: 28rpx;" @click="manageClick">{{isManage?$t("common.cancelText"):$t("group.common.manage")}}</text>
			</template>
		</cl-navbar>
		<view class="pageContent">
			<view class="groupCreator">
				<text class="groupCreator__title">{{$t("group.common.creator")}}</text>
				<view class="groupCreator__bottom">
					<view class="groupCreator__bottom__left">
						<cl-avatar :src="getCreator.avatar_url" size="100rpx"></cl-avatar>
						<text class="groupCreator__bottom__left__name">{{getCreator.group_nickname || getCreator.user_nickname}}</text>
					</view>
					<u-icon name="arrow-right" color="#ffffff"></u-icon>
				</view>
			</view>
			<view class="groupCreator">
				<text class="groupCreator__title">{{$t("group.common.manage")}}({{getManagers.length}})</text>
				<view class="groupCreator__bottom" v-for="(item,index) in getManagers" :key="index" @click="deleteManager(item)">
					<view class="groupCreator__bottom__left">
						<cl-avatar :src="item.avatar_url" size="100rpx"></cl-avatar>
						<text class="groupCreator__bottom__left__name">{{item.group_nickname || item.user_nickname}}</text>
					</view>
					<u-icon name="arrow-right" color="#ffffff" v-if="!isManage"></u-icon>
					<u-icon name="minus-circle-fill" color="#ff4242" v-else size="20"></u-icon>
				</view>
				<view class="groupCreator__bottom" @click="addManager">
					<view class="groupCreator__bottom__left">
						<image src="/static/icon/add.png" style="width: 64rpx;height: 64rpx;"></image>
						<text class="groupCreator__bottom__left__name" style="color: #61626e;">{{$t("group.common.addManage")}}</text>
					</view>
					<u-icon name="arrow-right" color="#ffffff"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import groupMembersApi from "@/services/api/group_members.js"
	import {
		mapState
	} from 'vuex'
	export default {
		name: 'group_chat_manage',
		data() {
			return {
				group_id:'',
				isManage:false,
				memberList:[]
			}
		},
		async onLoad() {
			let query = this.$Route.query
			this.group_id = query.group_id
			this.getGroupManager()
			
			uni.$on('onGroupMemberAction',this.onGroupMemberAction)
		},
		onUnload() {
			uni.$off('onGroupMemberAction', this.onGroupMemberAction);
		},
		computed: {
			getCreator(){
				let creatorData = this.memberList.find(item=>item.role == 'creator')
				if(creatorData){
					return creatorData
				}
				return {}
			},
			getManagers(){
				return this.memberList.filter(item=>item.role == 'manager')
			}
		},
		methods: {
			//监听成员变化
			onGroupMemberAction(data){
				if(data.type == 'managerAdd'){
					uni.$u.throttle(this.getGroupManager, 100, false,'managerAdd')
				}
			},
			
			async getGroupManager(){
				try{
					let managerRes = await groupMembersApi.getManagersListPage({
						group_id:this.group_id,
						page:1,
						limit:200
					})
					if(managerRes){
						this.memberList = managerRes.list
					}
				}catch(e){
					//TODO handle the exception
				}
			},
			manageClick(){
				this.isManage = !this.isManage
			},
			addManager(){
				this.$Router.push({
					name:'group_members',
					params: {
						type:'manager',
						group_id:this.group_id
					}
				})
			},
			async deleteManager(item){
				if(this.isManage){
					try{
						let apires = await groupMembersApi.editRole(this.group_id,[item.user_id],'member')
						if(apires){
							let index = this.memberList.findIndex(it=>it.user_id == item.user_id)
							if(index != -1)this.memberList.splice(index,1)
						}
					}catch(e){
						//TODO handle the exception
					}
				}
			}
		},
	};
</script>

<style scoped lang="scss">
	.groupCreator{
		margin: 20rpx 30rpx 0;
		background: #1E1F30;
		border-radius: 20rpx;
		padding: 20rpx;
		&__title{
			font-size: 28rpx;
			color: #61626e;
		}
		&__bottom{
			height: 100rpx;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			&__left{
				display: flex;
				align-items: center;
				&__name{
					font-size: 28rpx;
					color: #FFFFFF;
					margin-left: 20rpx;
				}
			}
		}
	}
	.cellviewGrop {
		background: #1E1F30;
		border-radius: 20rpx;
		margin: 20rpx 30rpx 0;
	
		.cellview {
			display: flex;
			justify-content: space-between;
			padding: 20rpx;
			min-height: 70rpx;
			&__left {
				display: flex;
				align-items: center;
				
				&__title {
					font-size: 28rpx;
					margin-left: 20rpx;
					color: #FFFFFF;
				}
			}
			&__right {
				display: flex;
				align-items: center;
			
				&__content {
					font-size: 28rpx;
					color: #61626e;
				}
			}
		}
	}
	
</style>